<!Doctype html>
<html>
<head>
    {{template "inc/meta.tpl" .}}
    <style type="text/css">
        body {
            background: #0066A8;
        }

        .tit {
            margin: auto;
            margin-top: 170px;
            text-align: center;
            width: 350px;
            padding-bottom: 20px;
        }

        .login-wrap {
            width: 220px;
            padding: 30px 50px 0 330px;
            height: 220px;
            background: #fff url(/static/img/20150212154319.jpg) no-repeat 30px 40px;
            margin: auto;
            overflow: hidden;
        }

        .login_input {
            display: block;
            width: 210px;
        }

        .login_user {
            background: url(/static/img/input_icon_1.png) no-repeat 200px center;
        }

        .login_password {
            background: url(/static/img/input_icon_2.png) no-repeat 200px center;
        }

        .btn-login {
            background: #40454B;
            box-shadow: none;
            text-shadow: none;
            color: #fff;
            border: none;
            height: 35px;
            line-height: 26px;
            font-size: 14px;
        }

        .btn-login:hover {
            background: #333;
            color: #fff;
        }

        .copyright {
            margin: auto;
            margin-top: 10px;
            text-align: center;
            width: 370px;
            color: #CCC;
        }
    </style>
</head>
<body>
<div class="tit"><img src="/static/img/tit.png" alt="" /></div>
<div class="login-wrap">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td height="25" valign="bottom">邮  箱：</td>
        </tr>
        <tr>
            <td><input type="text" id="email" class="login_input login_user" value="" /></td>
        </tr>
        <tr>
            <td height="35" valign="bottom">密  码：</td>
        </tr>
        <tr>
            <td><input type="password" id="password" class="login_input login_password" value="" /></td>
        </tr>
        <tr>
            <td height="60" valign="bottom">
                <input id="login" class="btn btn-block btn-login" type="button" value="登录" />
            </td>
        </tr>
    </table>
</div>
{{template "inc/foot.tpl" .}}
<script type="text/javascript">
    $(function () {
        $("#login").click(function () {
            if ($("#email").val().length < 5) {
                alert_it("错误","邮箱名必须5位以上");
                return;
            }
            if (!/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test($("#email").val())) {
                alert_it("错误","请输入正确的邮箱地址！");
                return;
            }
            if ($("#password").val().length < 8) {
                alert_it("错误","密码必须8位以上");
                return;
            }
            if (!/^[0-9a-zA-Z_]{1,}$/.test($("#password").val())) {
                alert_it("错误","密码只能包含字母、数字、下划线！");
                return;
            }
            var d=dialog({
                title:"登录中，请稍候……",
                width:'360',
                height:'180',
            });
            $.ajax({
                url: '/login',
                type: 'POST',
                async: true,
                data: {
                    email: $("#email").val(),
                    password: $("#password").val()
                },
                timeout: 10000,
                dataType: 'json',
                beforeSend: function (xhr) {
                    d.showModal();
                },
                success: function (data, textStatus, jqXHR) {
                    if(data.code==0){
                        alert_it("结果","code:"+data.code+",msg:"+data.message);
                    }else{
                        window.location.href="/";
                    }
                },
                error: function (xhr, textStatus) {
                    alert_it("错误",textStatus);
                },
                complete: function () {
                    d.close();
                    $("#email").val("");
                    $("#password").val("");
                }
            });
        });
    });
    $(document).keydown(function(event){
        if(event.keyCode ==13){
            $("#login").trigger("click");
        }
    });
</script>
</body>
</html>